<script setup lang="ts">
import { MailIcon } from 'vue-tabler-icons';
import { ref } from 'vue';

import { useAuthStore } from '@/stores/auth';
import type { profileType } from '@/types/HeaderTypes';

const authStore = useAuthStore();

const profileDD: profileType[] = [
    {
        title: 'My Profile',
        href: '/main/user/profile',
        badge: false
    },
    // {
    //     title: 'My Subscription',
    //     href: '/pages/pricing',
    //     badge:false
    // },
    // {
    //     title: 'My Notes',
    //     href: '/apps/notes',
    //     badge:true
    // },
    // {
    //     title: 'Account Settings',
    //     href: '/pages/account-settings',
    //     badge:false
    // },
    {
        title: 'Sign Out',
        href: '/auth/login',
        badge: false
    },

];

const logoutDialog = ref(false);
function confirmLogout() {
    logoutDialog.value = true;
}
function doLogout() {
    logoutDialog.value = false;
    authStore.logout();
}
</script>

<template>
    <!-- ---------------------------------------------- -->
    <!-- notifications DD -->
    <!-- ---------------------------------------------- -->
    <v-menu open-on-hover open-on-click>
        <template v-slot:activator="{ props }">
            <v-btn variant="text" class="custom-hover-primary" color="primary" v-bind="props" icon>
                <v-avatar size="35">
                    <img :src="authStore.avatar" width="35" alt="Julia" />
                </v-avatar>
            </v-btn>
        </template>
        <v-sheet rounded="md" width="280" elevation="10">
            <div class="pa-6">
                <div class="d-flex align-center pb-6">
                    <v-avatar size="55">
                        <img :src="authStore.avatar" width="55" />
                    </v-avatar>
                    <div class="ml-3">
                        <h6 class="text-subtitle-1 mb-n1">{{ authStore.username }}<span
                                class="text-success text-caption">Pro</span></h6>
                        <span class="text-subtitle-1 text-textSecondary">{{ authStore.userInfo.email }}</span>
                    </div>
                </div>
                <v-divider></v-divider>
                <perfect-scrollbar>
                    <v-list class="py-0 theme-list mt-3" lines="one">
                        <v-list-item v-for="item in profileDD" :key="item.title"
                            class="py-0 px-2 rounded-md custom-text-primary" color="primary"
                            :to="item.title === 'Sign Out' ? undefined : item.href"
                            @click="item.title === 'Sign Out' ? confirmLogout() : undefined">
                            <div class="d-flex gap-3 align-center">
                                <p class="text-subtitle-1 heading custom-title">{{ item.title }}</p>
                                <v-chip size="small" color="error" v-if="item.badge">4</v-chip>
                            </div>
                        </v-list-item>
                    </v-list>
                </perfect-scrollbar>
            </div>
        </v-sheet>
    </v-menu>
    <v-dialog v-model="logoutDialog" max-width="400">
        <v-card class="pa-6 text-center">
            <v-card-title class="justify-center text-h6 font-weight-bold mb-2">Confirm logout?</v-card-title>
            <v-card-text class="mb-4 grey--text">After logging out, you will not be able to access system content. Do
                you
                want to continue?</v-card-text>
            <v-card-actions class="justify-center">
                <v-btn variant="text" class="px-8" @click="logoutDialog = false">Cancel</v-btn>
                <v-btn color="error" variant="flat" class="px-8" @click="doLogout">Confirm</v-btn>
            </v-card-actions>
        </v-card>
    </v-dialog>
</template>
